<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            background: #b6b6b6;
        }
        ul{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .indexShow{
            position: relative;
            width: 1083px;
            height: 350px;
            /*background-color: #3B79ED;*/
            margin: auto;

        }
        .indexShowleft{
            position: absolute;
            top: 45%;
            left: -5%;
            width: 28px;
            height: 28px;
            background: url("imgs/sl.png")  no-repeat;
            display: block;

        }
        .indexShowright{
            position: absolute;
            top: 45%;
            right: -5%;
            width: 28px;
            height: 28px;
            background: url("imgs/sr.png")  no-repeat;
            display: block;

        }
        .indexShowBox{
            width: 100%;
            height: 100%;
            /*background: #faa;*/
        }
        .indexShowBox > ul{
            width: 100%;
            height: 100%;
        }
        .indexShowBox li{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transition: all .4s linear;
        }
        .indexShowBox a{
            width: 100%;
            height: 100%;
            display: block;
        }
    </style>

</head>
<body>
<div class="indexShow">
    <a href="#" class="indexShowleft" ></a>
    <a href="#" class="indexShowright"></a>
    <div class="indexShowBox">
        <ul class="indexShowUl">
            <li style="opacity: 1;z-index: 4;">
                <a href="" class="img-link" >
                    <img src="imgs/banner1.jpg" alt=""/>
                </a>
            </li>
            <li style="opacity: 0;z-index: 1;">
                <a href="" class="img-link">
                    <img src="imgs/banner2.jpg" alt=""/>
                </a>
            </li>
            <li style="opacity: 0;z-index: 1;">
                <a href="" class="img-link">
                    <img src="imgs/banner3.jpg" alt="" />
                </a>
            </li>
            <li style="opacity: 0;z-index: 1;">
                <a href="" class="img-link">
                    <img src="imgs/banner4.jpg" alt="" />
                </a>
            </li>
        </ul>
    </div>
</div>

<script>
window.onload = function(){
    var liList = childNodesFun(document.getElementsByClassName("indexShowUl")[0].childNodes);
    var num  = -1;
    var indexShowBox = document.getElementsByClassName('indexShowBox')[0],
            indexShowleft = document.getElementsByClassName('indexShowleft')[0],
            indexShowright = document.getElementsByClassName('indexShowright')[0],
            indexShow = document.getElementsByClassName('indexShow')[0];

    //一开始 使得图片轮播的函数
    var set1 = setInterval(setdoit,3000);
    //移入 停止轮播
    indexShowBox.addEventListener('mouseover',mouseoverfun);
    indexShowBox.addEventListener('mouseout',mouseoutfun);
    //indexShowleft.addEventListener('mouseover',mouseoverfun);
    indexShowleft.addEventListener('mouseout',mouseoutfun);
   //indexShowright.addEventListener('mouseover',mouseoverfun);
    indexShowright.addEventListener('mouseout',mouseoutfun);
    //点击 left按钮 执行上一张图片
    indexShowleft.addEventListener('click',indexShowleftDo);
    //点击 right按钮 执行下一张图片
    indexShowright.addEventListener('click',indexShowrightDo);

    //移入 停止轮播
    function mouseoverfun(){
        console.log(set1);
        clearInterval(set1);
        console.log(set1);
    }
    //移出 继续轮播
    function mouseoutfun(){
        console.log("mouseout");
        set1 = setInterval(setdoit,3000);
    }

    //点击 执行上一张图片函数
    function indexShowleftDo(){
        clearInterval(set1);
        num -=1;
        console.log("indexShowleftDo: "+num);
        //第一张的特殊情况处理
        if(num<0){
            num = 3;
        }
        //即时的 出现效果
        for(var i=0;i<liList.length;i++){
            liList[i].style.zIndex = 1;
            liList[i].style.opacity = 0;
        }
        liList[num].style.zIndex = 4;
        liList[num].style.opacity = 1;
    }
    //点击 right按钮 执行下一张图片函数
    function indexShowrightDo(){
        clearInterval(set1);
        num +=1;
        console.log("indexShowrightDo: "+num);
        //第一张的特殊情况处理
        if(num > 3){
            num = 0;
        }
        //即时的 出现效果
        for(var i=0;i<liList.length;i++){
            liList[i].style.zIndex = 1;
            liList[i].style.opacity = 0;
        }
        liList[num].style.zIndex = 4;
        liList[num].style.opacity = 1;
    }
    //开始新的循环
    function setdoit(){
        if(num == 3){
            num = -1;
        }
        num++;
        console.log("后一个状态  :"+num);
        for(var i=0;i<liList.length;i++){
            liList[i].style.zIndex = 1;
            liList[i].style.opacity = 0;
        }
        liList[num].style.zIndex = 4;
        liList[num].style.opacity = 1;
    }
    function childNodesFun(doc){
        var arry = [];
        for(var i = 0,j=0; i < doc.length ; i++){
            if(doc[i].nodeName != "#text"){
                arry[j] = doc[i];
                j++;
            }
        }
        return arry;
    }
}
</script>
</body>
</html>